import React from 'react';
import { Input, Button, Form, Col, Row, Icon } from 'antd';

const FormItem = Form.Item;
const Environment = ({ container, createGroupEnv, deleteGroupEnv ,form}) => {
  const {getFieldDecorator} = form;
  const envList = container.envList.map(item => {
    return (
      <Row key={item}>
        <Col span={10}>
          <FormItem>
            <Col span={11}>
              <FormItem
              >
                {getFieldDecorator(`env[${item}]['key']`, {
                  initialValue: '',
                  rules: [{
                  required: true,
                    message:'is required'
                }],
                })(
                  <Input type="text" placeholder="key"/>,
                )}
              </FormItem>
            </Col>
            <Col span={11} offset={1}>
              <FormItem
              >
                {getFieldDecorator(`env[${item}]['value']`, {
                  initialValue: '',
                  rules: [{
                    required: true,
                    message:'is required'
                  }]
                })(
                  <Input type="text" placeholder="value"/>,
                )}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col span={4}>
          <a onClick={() => {
            deleteGroupEnv(item)
          }}>
            <Icon type="minus-circle" style={{ fontSize: 25, marginTop: 5 }}/>
          </a>
        </Col>
      </Row>
    );
  });
  return (
    <div>
      <Button onClick={() => {
        createGroupEnv();
      }}>
        添加环境变量
      </Button>
      <p></p>
      {envList}
    </div>
  );
};
export default (Environment);
